<template>
  <div class="channelLink">
    <div class="title">
      <h3>医院渠道链接</h3>
    </div>
    <div class="ment-div-form">
      <el-form ref="formData" :model="formData">
        <el-row type="flex" justify="space-between">
          <el-col :span="3">
            <el-button plain type="primary" @click="addChannelLink">添加渠道链接</el-button>
          </el-col>
          <el-col :span="6">
            <el-col :span="12" class="el-col-offset-3">
              <el-input
                v-model="formData.keySearch"
                class="ele-input"
                placeholder="请输入医院名称搜索"
              />
            </el-col>
            <el-col :span="3" class="el-col-offset-1">
              <el-button type="primary" class="ele-btn-submit" @click="search">确认</el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      ref="elTable"
      v-loading="listLoading"
      :data="list"
      :fit="true"
      element-loading-text="正在查询中。。。"
    >
      <el-table-column label="渠道链接" prop="channelName" />
      <el-table-column label="访问用户" prop="visitCount" />
      <el-table-column label="下单用户" prop="orderUserCount" />
      <el-table-column label="订单量" prop="orderCount" />
      <el-table-column label="下单金额" prop="orderPriceCount" />
      <el-table-column label="创建时间" prop="addTime" />
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="extensionLink(scope.row)">渠道链接 </el-button>
          <el-button type="text" @click="handleUpdate(scope.row)">编辑 </el-button>
          <el-button
            type="text"
            class="deleteBtn"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="footer-left" />
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
    <el-dialog :visible.sync="linkVisible" title="推广员链接" :modal="false" class="extension-link">
      <div class="head" style="width:150px;display: flex;justify-content: space-between">
        <div class="left" style="width: 60px;height: 60px"> <el-image :src="require('@/assets/images/avator.png')" /></div>
        <div class="right" style="line-height: 60px"> {{ extensioner.name }} </div>
      </div>
      <div class="content" style="display: flex; justify-content: space-between">
        <div class="left-tab">
          <el-radio-group v-model="linkType">
            <el-col :span="24" class="link-tab">
              <el-radio-button label="wechat">微信</el-radio-button>
            </el-col>
            <el-col :span="24" class="link-tab">
              <el-radio-button label="alipay">支付宝</el-radio-button>
            </el-col>
          </el-radio-group>
        </div>
        <div class="right-code-content">
          <div v-if="linkType == 'wechat'">
            <div class="little-title">
              <p>小程序</p>
            </div>
            <div class="right-link-content">
              <div class="left-code">
                <el-card>
                  <el-row type="flex" justify="center">
                    <qr-code
                      :options="{
                        text: 'https://qrc.ejiakanghu.cn/qrcode/hospital?code='+linkUrl,
                        width: 120,
                        height: 120,
                      }"
                    />
                  </el-row>
                  <el-row type="flex" justify="center">
                    <el-button type="primary" @click="downLoad">下载小程序码</el-button>
                  </el-row>

                </el-card>
              </div>
              <div class="right-linkAddress">
                <el-col :span="24"><el-input v-model="extensioner.wechatLinkAddress" /></el-col>
                <el-col :span="24" type="flex" justify="space-between"><div /> <div><el-button type="primary" @click="copyLink">复制链接</el-button></div></el-col>
              </div>
            </div>

          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** 医生管理 */
import { getToken } from '@/utils/auth'
import QrCode from '@/components/QrCode'
import { deleteHospitalChannelLink, hospitalChannelLinkList } from '@/api/customAPI/shop/hospitalManage'

export default {
  name: 'ChannelLink',
  components: { QrCode },
  data() {
    return {
      hospitalId: null,
      formData: {
        page: 1,
        limit: 20,
        keyword: ''
      },
      list: [],
      selectList: [],
      listLoading: true,
      total: 0,
      page: 1,
      limit: 20,
      linkVisible: false,
      extensioner: {
        avator: null,
        name: null,
        wechatCode: null,
        wechatLinkAddress: null,
        alipayCode: null,
        alipayLInkAddress: null
      },
      linkType: 'wechat',
      linkUrl: null
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    const params = this.$dd(this.$route.query.p)
    console.log(params)
    this.hospitalId = params.hospitalInfo.mainHospital.id
    this.reloadTableData()
  },
  methods: {
    /** 页码加载初始化*/
    resetFormData() {
      this.$refs.formData.resetFields()
      this.reloadTableData()
    },
    search() {
      this.reloadTableData()
    },
    pageSizeChange(pageSize) {
      this.limit = pageSize
      this.getList()
    },
    currentPageChange(page) {
      this.page = page

      this.getList()
    },
    reloadTableData() {
      this.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    /** 获取医院渠道链接列表*/
    getList() {
      const data = {
        page: this.page,
        limit: this.limit,
        hospitalSendId: this.hospitalId
      }
      if (this.formData.keySearch) {
        data['keySearch'] = this.formData.keySearch
      }
      this.listLoading = true
      hospitalChannelLinkList(data).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    /** 编辑*/
    handleUpdate(row) {
      this.$router.push({
        name: 'EditChannelLink',
        query: {
          p: this.$ed({
            hospitalId: this.hospitalId,
            channelLink: row,
            edit: true
          })
        }
      })
    },

    /** 删除渠道链接*/
    handleDelete(row) {
      this.$confirm('是否删除该渠道链接?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteHospitalChannelLink(row.id).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '删除异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '异常',
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** 添加渠道链接*/
    addChannelLink() {
      this.$router.push({
        name: 'AddChannelLink',
        query: {
          p: this.$ed({
            hospitalId: this.hospitalId
          })
        }
      })
    },

    /** 查看链接*/
    extensionLink(row) {
      this.linkVisible = true
      this.linkUrl = row.linkUrl
      this.extensioner.wechatLinkAddress = 'https://qrc.ejiakanghu.cn/qrcode/hospital?code=' + this.linkUrl
      this.extensioner.name = row.channelName
      /* getExtensionInfo({id: row.id}).then(res =>{
        this.extensioner.avator = res.data.data.avator
        this.extensioner.name = res.data.data.name
        this.extensioner.wechatCode = res.data.data.wechatCode
        this.extensioner.wechatLinkAddress = res.data.data.wechatLinkAddress
        this.extensioner.alipayCode = res.data.data.alipayCode
        this.extensioner.alipayLInkAddress = res.data.data.alipayLInkAddress
      }).catch(err =>{
        this.$message.error('加载推广链接失败')
        this.linkVisible = false
      })*/
    },
    downLoad(data) {
      const myCanvas = document.getElementsByTagName('canvas')[0]
      const a = document.createElement('a')
      a.href = myCanvas.toDataURL('image/png')
      a.download = '二维码'
      a.click()
      this.$message({
        message: '正在进行下载保存',
        type: 'success'
      })
    },
    copyLink() {
      const url = this.extensioner.wechatLinkAddress
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    }
  }
}
</script>

<style lang="scss" scoped>
.channelLink {
  min-width: 1849px;
  padding: 50px 100px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
  ::v-deep .el-button {
    height: 36px;
  }
}
.deleteBtn {
  color: #ff0000;
}
::v-deep .el-table__body .el-table-column--selection .cell {
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 100px 0px;
  .footer-left {
    ::v-deep.el-button {
      width: 100px;
      margin: 0px;
    }
  }
}
.extension-link {
  .content {
    margin-top: 20px;
    .left-tab {
      width: 150px;
      height: auto;
      background-color: #F5F7FA;
      padding-left: 5px;
      padding-top: 5px;
      .link-tab {
        margin-bottom: 10px;
        .el-radio-button {
          width: 140px;
          ::v-deep .el-radio-button__inner {
            width: 140px;
          }
        }
      }
    }
    .right-code-content {
      width: 750px;
      .little-title {
        width: 100%;
        height: 50px;
        background-color: #F5F7FA;
        p {
          line-height: 50px;
          color: #409EFF;
        }
      }
      .right-link-content {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .left-code {
          width: 220px;
        }
        .right-linkAddress {
          width: 500px;
        }
      }
    }
  }
}
</style>
